<!--  -->
<template>
  <div class="details container">
    <Breadcrumb />
    <main>
      <div class="content">
        <div class="wrapper">
          <el-carousel :interval="3000" height="500px">
            <el-carousel-item v-for="(item, i) in goodsDetailsInfo.images" :key="i">
              <img style="height: 500px; width: 100%" :src="item" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="pet-info">
          <h1 v-show="priceVisible">{{ goodsDetailsInfo.proName }}</h1>
          <h1 v-show="!priceVisible">{{ cartInfo.skuName }}</h1>
          <p class="brandName">
            品牌：<span>{{ goodsDetailsInfo.brandName }}</span>
          </p>
          <ul>
            <li v-show="priceVisible">
              价格：<span class="price">￥{{ goodsDetailsInfo.price }} </span
              ><span class="promotion">促销价</span>
            </li>
            <li v-show="!priceVisible">
              价格：<span class="price">￥{{ cartInfo.price }} </span
              ><span class="promotion">促销价</span>
            </li>
            <li v-for="item in skuAttr" :key="item.attrId">
              {{ item.attrName }}:
              <el-radio-group v-model="item.vallue" size="small" @change="getSkuValue">
                <el-radio-button
                  ref="rabutton"
                  :label="item"
                  v-for="(item, i) in item.attrValue"
                  :key="i"
                ></el-radio-button>
              </el-radio-group>
            </li>
            <li>
              数量：
              <div class="number">
                <el-button
                  class="num-sub"
                  size="mini"
                  :disabled="number <= 1 ? true : false"
                  @click="number--"
                  icon="el-icon-minus"
                ></el-button>
                <span class="num">{{ number }}</span>
                <el-button
                  icon="el-icon-plus"
                  class="num-add"
                  size="mini"
                  :disabled="number >= cartInfo.stockCount ? true : false"
                  @click="number++"
                ></el-button>
              </div>
            </li>
            <!-- <li>销售量：{{ saleCount }}</li> -->
            <li>
              <div>
                快递：<span class="sent">包邮</span> &nbsp;&nbsp;&nbsp;&nbsp;
                <span class="comment" @click="returnCom">累计评论</span>
              </div>
            </li>

            <!-- <li class="child-li">
              分享:<vshare :vshareConfig="vshareConfig"></vshare>
            </li> -->
            <li class="last-child-li">
              <span class="addCart-btn" @click="addCart">加入购物车</span
              ><span class="buy-btn" @click="toCart">立即购买</span>
            </li>
          </ul>
        </div>
      </div>
      <Pettitle :proInfo="goodsDetailsInfo" />
    </main>
  </div>
</template>

<script>
// 导入面包屑组件
import Breadcrumb from "../components/Breadcrumb";
import Pettitle from "../components/details/Pettitle";
import cookie from "js-cookie";
// 引入分享功能的插件
// import vshare from 'vshare'
export default {
  name: "Details",
  components: {
    Breadcrumb,
    Pettitle,
  },
  data() {
    return {
      disabled: false,
      radio: 1,
      // 分享功能的配置
      vshareConfig: {
        // 此处放分享列表（ID）
        shareList: ["weixin", "qzone"],
        //此处放置分享按钮设置
        share: [{ bdSize: 24 }],
        //此处放置浮窗分享设置
        slide: false,
      },
      // 详细信息
      goodsDetailsInfo: {},
      // 销售属性
      skuInfo: [],
      skuAttr: [],
      // saleCount: "",
      number: 1,
      selectSku: [],
      // 选中的sku名
      str: "",
      // 加入购物车的信息
      cartInfo: {},
      // 直接购买信息
      goBuyInfo: {},
      // 价格显示
      priceVisible: true,
    };
  },
  watch: {
    number() {
      this.cartInfo.count = this.number;
    },
    cartInfo: {
      handler(newName) {
        // console.log("new", newName, oldName);
        this.cartInfo = newName;
        if (this.cartInfo.skuName) {
          this.priceVisible = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    // console.log(this.$route.query.id); // 通过打印路由信息可以查看道传过来的id
    this.getGoodsDetailsInfo(this.$route.query.id);
  },
  methods: {
    returnCom() {
      const returnEle = document.querySelector("#comment");
      if (returnEle) {
        returnEle.scrollIntoView(true);
      }
    },
    // 获取详细信息
    async getGoodsDetailsInfo(id) {
      const { data: res } = await this.$http.get(`/dqxmall/prosysproinfo/info/${id}`);
      this.goodsDetailsInfo = {};
      // console.log(res);
      this.goodsDetailsInfo = res.spuSaveVo;
      console.log(this.goodsDetailsInfo);
      var data1 = { attrId: 0, attrName: "", value: "", attrValue: [] };
      this.goodsDetailsInfo.skus[0].attr.forEach((item) => {
        data1 = { attrId: 0, attrName: "", value: "", attrValue: [] };
        data1.attrId = item.attrId;
        data1.attrName = item.attrName;
        data1.value = item.value;
        // data1.attrValue.push(item.attrValue);
        this.skuAttr.push(data1);
      });
      console.log("dd", this.skuAttr);
      this.goodsDetailsInfo.skus.forEach((item) => {
        var data = {};
        data.skuId = item.skuId;
        data.price = item.price;
        data.descar = item.descar;
        data.skuName = item.skuName;
        data.stockCount = item.stockCount;
        data.saleCount += item.saleCount;
        item.attr.forEach((item1) => {
          this.skuAttr.forEach((data1) => {
            if (item1.attrId === data1.attrId) {
              data1.attrValue.push(item1.attrValue);
            }
          });
        });
        this.skuInfo.push(data);
      });
      console.log("skuInfo", this.skuInfo);
      this.skuAttr.forEach((item) => {
        item.attrValue = Array.from(new Set(item.attrValue));
      });
      // console.log("skuAttr", this.skuAttr);
    },
    getSkuValue() {
      // console.log("ddddd", value);
      this.selectSku = [];
      this.selectSku.push(this.goodsDetailsInfo.proName);
      // console.log(this.$refs.rabutton);
      this.$refs.rabutton.forEach((item) => {
        if (item._vnode.data.class[1]) {
          // console.log("AA", item.value);
          this.selectSku.push(item.value);
        }
      });
      this.selectSku = Array.from(new Set(this.selectSku));
      console.log("this.selectSku", this.selectSku);
      console.log("this.skuInfo", this.skuInfo);
      this.str = "";
      for (var i = 0; i < this.selectSku.length; i++) {
        if (i === this.selectSku.length - 1) {
          this.str += this.selectSku[i];
        } else {
          this.str += this.selectSku[i] + " ";
        }
      }
      console.log("111", this.str, "111");
      // console.log(this.selectSku.split(" "));
      this.cartInfo = {};
      this.skuInfo.forEach((item) => {
        console.log("222", item.skuName, "222");
        console.log("dd", item.skuName == this.str);
        if (item.skuName == this.str) {
          this.cartInfo.proid = this.goodsDetailsInfo.id;
          this.cartInfo.skuid = item.skuId;
          this.cartInfo.count = this.number;
          this.cartInfo.saleCount = item.saleCount;
          this.cartInfo.stockCount = item.stockCount;
          this.cartInfo.price = item.price;
          this.cartInfo.skuName = item.skuName;
        }
      });
      console.log("this.cartInf", this.cartInfo);
    },
    // 加入购物车 （需要接口判断当前skuid如果已经添加则不能添加了）
    async addCart() {
      if (!this.$store.state.isLogin) {
        this.$store.commit("showLoginModal");
      } else {
        if (this.cartInfo.skuName) {
          // console.log(this.goodsDetailsInfo);
          const { data: res } = await this.$http.post("/dqxmall/cart/save", [
            {
              skuid: this.cartInfo.skuid,
              count: this.cartInfo.count,
              proid: this.goodsDetailsInfo.id,
            },
          ]);
          // console.log("tinajia", res);
          if (res.code !== 0) return this.$http.message.error("添加失败");
          this.$message.success("添加成功");
          let number = JSON.parse(cookie.get("shopcarNumber")) + 1;
          cookie.set("shopcarNumber", number, {
            domain: "localhost",
          });
          this.$store.dispatch("setShopcarNumber", number);
        } else {
          this.$message.error("请选择商品属性");
        }
      }
    },
    // 购买，跳转到购物车
    toCart() {
      // this.$router.push("/shopcar");
      if (!this.$store.state.isLogin) {
        this.$store.commit("showLoginModal");
      } else {
        if (this.cartInfo.skuName) {
          console.log(this.cartInfo);
          this.goBuyInfo.price = this.cartInfo.price;
          this.goBuyInfo.count = this.number;
          this.goBuyInfo.saleCount = this.cartInfo.saleCount;
          this.goBuyInfo.stockCount = this.cartInfo.stockCount;
          this.goBuyInfo.proid = this.goodsDetailsInfo.id;
          this.goBuyInfo.skuid = this.cartInfo.skuid;
          this.goBuyInfo.skuImg = this.goodsDetailsInfo.images[0];
          this.$store.dispatch("setBuyGoodsList", [this.goBuyInfo]);
          this.$store.dispatch(
            "setTotalPrice",
            this.cartInfo.price * this.cartInfo.count
          );
          this.$router.push({ path: "/purchase" });
        } else {
          this.$message.error("请选择商品属性");
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/total.less";
.details {
  background-color: rgb(255, 255, 255);
  padding: 20px;
  box-sizing: border-box;
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .wrapper {
      height: 500px;
      width: 600px;
      margin: 20px;
    }
  }
  .pet-info {
    background-color: rgb(239, 239, 239);
    width: 484px;
    box-sizing: border-box;
    padding-top: 30px;
    p {
      color: rgb(253, 187, 6);
      font-size: 25px;
      margin: 20px 30px;
      span {
        color: rgb(24, 23, 23);
      }
    }
    h1 {
      text-align: center;
      font-weight: 700;
      font-size: 25px;
      padding: 10px;
    }
    li {
      margin: 30px;
      font-size: 20px;
      .price {
        font-weight: bold;
        color: tomato;
      }
      .el-radio-button {
        margin: 2px 5px;
      }
      .promotion {
        border-radius: 3px;
        background-color: rgb(255, 157, 0);
        color: white;
        font-size: 15px;
      }
      .num-sub,
      .num-add {
        border-radius: 0;
        height: 30px;
        border: 0px solid white !important;
        cursor: pointer;
        font-weight: 700;
        color: black;
        width: 30px;
        padding: 5px;
        border: 1px solid rgb(82, 79, 79);
      }
      .num {
        display: inline-block;
        width: 40px;
        height: 34px;
        border-right: 2px solid rgb(82, 79, 79);
        border-left: 2px solid rgb(82, 79, 79);
        // margin: 5px 5px;
        text-align: center;
      }
      .number {
        box-sizing: border-box;
        display: inline-block;
        border: 2px solid rgb(80, 75, 75);
        background-color: #fff;
      }
      .sent {
        background-color: rgb(255, 38, 0);
        color: white;
        margin: 0 10px;
        padding: 0 5px;
        border-radius: 3px;
        font-size: 20px;
      }
      .comment {
        width: 100px;
        padding: 0 10px;
        color: white;
        cursor: pointer;
        border-radius: 8px;
        background-color: rgb(139, 212, 184);
      }
      .addCart-btn {
        display: block;
        width: 170px;
        padding: 10px;
        color: white;
        cursor: pointer;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: rgb(13, 173, 13);
        &:hover {
          background-color: rgb(255, 5, 5);
        }
      }
      .buy-btn {
        display: block;
        width: 170px;
        padding: 10px;
        text-align: center;
        color: rgb(255, 254, 254);
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid #ccc;
        background-color: rgb(3, 69, 250);
        &:hover {
          background-color: rgb(246, 7, 7);
        }
      }
    }

    .child-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 200px;
    }
    .last-child-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
